<template>
  <div>
    <a-card
      style="width:100%"
      :tabList="tabListNoTitle"
      :activeTabKey="noTitleKey"
      @tabChange="key => onTabChange(key, 'noTitleKey')"
    >
      <div>
        <a-avatar
          class="img"
          size="large"
          src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
          style="color: #f56a00; backgroundColor: #fde3cf"
        ></a-avatar>
      </div>

      <a-form class="form" :form="form" @submit="handleSubmit">
        <form-item>
          <div>
            <a-input v-model='form.username' placeholder='请输入账号'></a-input>
          </div>
           <div>
            <a-input v-model='form.password' placeholder='请输入密码' type='password'>
              <a-icon slot="suffix" type="enter" @click="login" class="clickable" />
            </a-input>
          </div>
        </form-item>

        <a-icon type="github" class="github clickable" theme="filled" />
      </a-form>
    </a-card>
  </div>
</template>

<script>
import {
  Card as ACard,
  Avatar as AAvatar,
  Form,
  Input as AInput,
  Button as AButton,
  Icon as AIcon,
} from "ant-design-vue/lib";
import FormItem from "ant-design-vue/lib/form/FormItem";
import Cookie from 'js-cookie'

export default {
  components: {
    AButton,
    ACard,
    AAvatar,
    "a-form": Form,
    FormItem,
    AInput
  },
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
      tabList: [
        {
          key: "login",
          scopedSlots: { tab: "customRender" }
        },
        {
          key: "tab2",
          tab: "tab2"
        }
      ],
      contentList: {
        tab1: "content1",
        tab2: "content2"
      },
      tabListNoTitle: [
        {
          key: "login",
          tab: "Login"
        },
        {
          key: "register",
          tab: "register"
        }
      ],
      key: "login",
      noTitleKey: "login",
      redirectURL: '/chat',
    };
  },
  methods: {
    onTabChange(key, type) {
      console.log(key, type);
      this[type] = key;
    },
    handleSubmit() {},
    login(data){
      console.log(this.redirectURL)
      Cookie.set('token', JSON.stringify(this.form)) ;
      this.$router.push(this.redirectURL);
    }
  },
  mounted(){
    let redirectURL = this.$route.query.ref ;
    if(redirectURL) {
      this.redirectURL = redirectURL ;
    }
  }
};
</script>

<style scoped>
.img {
  width: 100px;
  height: 100px;
}
.form {
  margin-top: 20px;
}
.github{
  font-size: 36px;
}
.clickable:hover{
  cursor: pointer;
  color: #1890ff;
}
</style>

